<template>
    <div
            :id="id"
            :class="className"
            :style="{height: height, width: width}"
    />
</template>

<script lang="ts">
    import echarts, {EChartOption} from 'echarts'
    import {Component, Prop} from 'vue-property-decorator'
    import {mixins} from 'vue-class-component'
    import ResizeMixin from './mixins/resize'
    import {convertBase64ToBlob, downloadFile} from "@/core/utils/download";

    @Component({
        name: 'PieChart'
    })
    export default class PieChart extends mixins(ResizeMixin) {
        @Prop({default: 'chart'}) private className!: string;
        @Prop({default: '统计图'}) private fileName!: string;
        @Prop({default: 'chart'}) private id!: string;
        // 标题
        @Prop({default: ''}) private title!: string;
        // 图表大小
        @Prop({default: '200px'}) private width!: string;
        @Prop({default: '200px'}) private height!: string;

        option: any = {
            title: {
                text: this.title,
                subtext: "",
                left: 'center'
            },
            grid: {
                height: 200,
                right: "500px"
            },
            tooltip: {
                trigger: 'item',
                formatter: '{a} <br/>{b} : {c} ({d}%)'
            },
            legend: {
                type: 'scroll',
                bottom: 10,
                left: 'center',
                data: []
            },
            series: [
                {
                    name: '企业数量',
                    type: 'pie',
                    radius: '65%',
                    center: ['50%', '50%'],
                    selectedMode: 'single',
                    avoidLabelOverlap: true,
                    data: [],
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };

        mounted() {
            this.$nextTick(() => {
                this.initChart()
            })
        }

        beforeDestroy() {
            if (!this.chart) {
                return
            }
            this.chart.dispose();
            this.chart = null
        }

        private initChart() {
            this.chart = echarts.init(document.getElementById(this.id) as HTMLDivElement);
            this.chart.setOption(this.option as EChartOption<EChartOption.SeriesBar>)
        }

        // 图表刷新
        changeChart(allCount: number, legendList: any, data: any, labelType: string) {
            this.option.title.subtext = "企业总数：" + allCount;
            this.option.legend.data = legendList;
            let seriesData: any = [];
            for (let i in legendList) {
                let labelFormatter: any;
                if (labelType == 'companyType') {
                    // 企业性质统计图的富文本标签样式
                    labelFormatter = [
                        '{title|{b}}',
                        '{hr|}',
                        '{value|企业性质占比}{rate|{d}%}',
                        '{value|企业数量}{rate|' + data[legendList[i]] + '}',
                        '{value|企业数量占比}{rate|' + this.percentage(data[legendList[i]], allCount) + '}'
                    ].join('\n');
                } else {
                    // 行业比较统计图的富文本标签样式
                    labelFormatter = [
                        '{title|{b}}',
                        '{hr|}',
                        '{value|企业数量}{rate|{c}}',
                        '{value|企业数量占比}{rate|{d}%}'
                    ].join('\n');
                }
                let myFontSize = 12;  // 显示文字大小
                let lines = 1;  // 行数
                let space = 0.5;  // 标签间距，单位行
                let myLineHeight = myFontSize * (lines + space) / (lines + 2);  // 基础行高
                seriesData.push({
                    value: data[legendList[i]],
                    name: legendList[i],
                    avoidLabelOverlap: true,
                    label: {
                        formatter: labelFormatter,
                        backgroundColor: '#eee',
                        avoidLabelOverlap: true,
                        borderColor: '#777',
                        lineHeight: myFontSize * space,
                        borderWidth: 1,
                        borderRadius: 4,
                        padding: [3, 5],
                        rich: {
                            title: {
                                color: '#000',
                                lineHeight: myLineHeight,
                                align: 'center',
                                padding: [5, 0]
                            },
                            hr: {
                                borderColor: '#777',
                                width: '100%',
                                borderWidth: 0.5,
                                height: 0
                            },
                            value: {
                                width: 80,
                                lineHeight: myFontSize + 2,
                                height: 25,
                                align: 'left'
                            },
                            rate: {
                                color: '#eee',
                                lineHeight: myFontSize + 1,
                                backgroundColor: '#334455',
                                borderRadius: 2,
                                padding: [2, 4],
                            }
                        }
                    }
                });
            }
            this.option.series[0].data = seriesData;
            //////console.log(this.option)
            this.chart?.setOption(this.option);
        }

        // 导出图片
        exportImg() {
            downloadFile(convertBase64ToBlob(this.chart?.getDataURL({
                pixelRatio: 2,
                backgroundColor: '#fff'
            })), this.fileName)
        }

        // 计算百分比
        percentage(number1: any, number2: any) {
            if (number2 == 0) {
                return "0%";
            }
            return (Math.round(number1 / number2 * 10000) / 100.00 + "%");
        }
    }
</script>
